import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { AntDesign } from "@expo/vector-icons";

const TestQuesCard = ({
  item,
  index,
  isDelete, //是否开启删除
  onDeleted, //删除方法
  deletedId, //删除旋转项
  onEdit, //编辑方法
  isEdit, //是否开启编辑
  isAdd, //试卷是否开启增加题目
  onPressItem, //选择题目
}) => {
  return (
    <View style={styles.container}>
      {isDelete && (
        <TouchableOpacity onPress={() => onDeleted(item._id)}>
          {item._id === deletedId ? (
            <AntDesign name="closecircleo" size={18} color="red" />
          ) : (
            <AntDesign name="closecircleo" size={18} color="#aaa" />
          )}
        </TouchableOpacity>
      )}
      <View>
        <Text style={{ fontSize: 16 }}>
          <Text style={styles.sequence}>{index + 1}</Text>
          <Text style={styles.tag}>
            {item.type == "singleSelect" ? " [单选] " : " [多选] "}
          </Text>
          {item.question}
        </Text>
        {isEdit && (
          <TouchableOpacity
            style={{
              position: "absolute",
              bottom: -8,
              right: 2,
              padding: 4,
            }}
            onPress={() => onEdit()}
          >
            <AntDesign name="edit" size={20} color="#F47C68" />
          </TouchableOpacity>
        )}
      </View>

      {item.options.map((option, index) => {
        return (
          <View key={index} style={styles.option}>
            <Text
              style={{
                fontWeight: !item.correntOption.includes(option.id)
                  ? "400"
                  : "bold",
                fontSize: 15,
                lineHeight: 20,
                color: !item.correntOption.includes(option.id)
                  ? "#000"
                  : "#3ABEF0",
              }}
            >
              {option.label}
            </Text>
          </View>
        );
      })}
      {isAdd && (
        <TouchableOpacity
          style={styles.selectOption}
          onPress={() => onPressItem(item._id)}
        >
          {item.checked === true ? (
            <AntDesign name="checkcircleo" size={20} color="green" />
          ) : (
            <AntDesign name="checkcircleo" size={20} color="#aaa" />
          )}
        </TouchableOpacity>
      )}
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    marginVertical: 8,
    margin: 14,
    backgroundColor: "#fff",
    borderRadius: 2,
    padding: 12,
  },
  sequence: {
    fontSize: 18,

    color: "#aaa",
    fontWeight: "bold",
  },
  tag: {
    color: "#3ABEF0",
    // fontStyle: "italic",
    fontSize: 14,
    fontWeight: "bold",
  },
  option: {
    padding: 10,
    marginLeft: 10,
    marginRight: 10,
    marginVertical: 5,
    backgroundColor: "#fff",
    borderRadius: 5,
    borderBottomColor: "#ddd",
    borderBottomWidth: 1,
  },
  selectOption: {
    alignSelf: "flex-end",
    padding: 5,
  },
});

export default TestQuesCard;
